<template>
  <div class="user_info">
    <div class="flex flex-between input_item">
      <label for="" class="required_icon">公司名称</label>
      <input v-model="formData.name"  placeholder="请输入公司名称" />
    </div>
    <div class="flex  flex-between input_item">
      <label for="" class="required_icon">主营业务</label>
      <input v-model="formData.mainProduct"  placeholder="请输入主营业务" />
    </div>
    <div class="flex input_item">
      <label for="" class="required_icon">所在地区</label>
        <picker mode="region" @change="bindRegionChange"  :value="region" :custom-item="customItem">
    <div class="picker">
      <input v-model="realAddress" disabled placeholder="请选择所在地区" />
    </div>
  </picker>
    </div>
      <div class="flex input_item">
      <label for="" class="required_icon">联系人</label>
      <input v-model="formData.contact" placeholder="请输入联系人" />
    </div>
       <div class="flex input_item">
      <label for="" class="required_icon">电话</label>
      <input v-model="formData.phone" maxlength="11" type="number" placeholder="请输入电话" />
    </div>
    <div class="flex input_item">
      <label for="">座机</label>
      <input v-model="formData.tel"  adjust-position='true' placeholder="请输入座机" />
    </div>
      <div class="flex input_item">
      <label for="">官网</label>
      <input v-model="formData.websiteUrl" adjust-position='true'  placeholder="请输入官网" />
    </div>
    <div class="flex input_item">
      <label for="" class="required_icon">地址</label>
      <input v-model="formData.address" adjust-position='true'  placeholder="请输入地址" />
    </div>
  <div class="flex input_item">
      <label for="">备注</label>
      <input v-model="formData.remark" adjust-position="true"  placeholder="请输入备注" />
      <!-- <textarea  v-model="formData.remark" adjust-position  placeholder="请输入备注" /> -->
    </div>
    <div class="flex input_item">
        <label for="">类型</label>
      <radio-group class="radio-group" v-model="formData.type" @change="radioChange">
        <label class="radio" v-for="item in typeList" :key="item.type">
          <radio :value="item.type" :checked='formData.type==item.type'/>{{item.name}}
        </label>
      </radio-group>
    </div>
  <div class="btn_box">
    <button @click="formSubmit">保存</button>
  </div>
  </div>
</template>

<script>
import api from "@/utils/api";
import checkApi from "@/utils/checkApi";

export default {
  data() {
    return {
      formData: {
        address: "",
        area: " ",
        city: "",
        province: "",
        contact: "",
        id: 0,
        mainProduct: "",
        name: "",
        phone: "",
        remark: "",
        tel: "",
        websiteUrl: "",
        type: 1 //状态 1：公司 2：个人'
      },
      typeList: [{ name: "公司", type: 1 }, { name: "个人", type: 2 }],
      region: ["", "", ""],
      codeList: [],
      customItem: "",
      isEdit: false, //true 就是编辑
      realAddress: "",
      pageType: ""
    };
  },
  onShow() {
    this.formData = {
      address: "",
      contact: "",
      area: " ",
      city: "",
      province: "",
      id: 0,
      name: "",
      phone: "",
      type: ""
    };
    this.region = ["", "", ""];
    this.realAddress = "";

  },
  async mounted() {
    let { query } = this.$route;
    if (query) {
      this.formData.id = query.id;
      this.pageType = query.type;
    }
    if (query.type) {
      this.isEdit = true;
      this.getDetail();
    } else {
      this.isEdit = false;
      this.formData.id = 0;
    }
    this.formData.type = 0;
    wx.setNavigationBarTitle({
      title: this.isEdit ? "编辑个人信息" : "完善个人信息"
    });
  },
  methods: {
    checkAll() {
      let fd = this.formData;
      let errMsg = "请填写必填项";
      var index = 0;
      Object.keys(fd).forEach(key => {
        if (
          key == "address" ||
         key == "contact" ||
          key =="area" ||
         key == "city" ||
         key == "province" ||
         key == "name" ||
         key == "phone" ||
        key ==  "mainProduct"
        ) {
          if (!fd[key]&&key!='id'&&key!='type') {
            index++;
          }
        }
      });
      if (index > 0) errMsg = "请填写必填项";
      if (fd.phone && !checkApi.isMobile(fd.phone)) {
        index++;
        errMsg = "请输入正确的手机号";
      }
      if (index > 0) {
        this.toastError(errMsg);
        return false;
      } else {
        return true;
      }
    },
    getDetail() {
      api.customer
        .Detail()
        .then(res => {
          // 获取个人信息
          console.log("res客户信息", res);
          if (res && res.code == 0) {
            this.formData = { ...this.formData, ...res.data };
          } else {
            this.toastError(res.msg);
          }
        })
        .catch(err => {
          this.toastError("网络繁忙");
        });
    },
    formSubmit() {
      let option = this.formData;
      if (!this.checkAll()) return;
      api.customer
        .Update(option)
        .then(res => {
          if (res && res.code == 0) {
            this.toastSuccess(res.msg);
            if (this.isEdit) {
              this.$router.go(-1);
            } else {
              wx.switchTab({
                url: "/pages/index/main"
              });
            wx.setStorageSync("token", res.head.token);
            wx.setStorageSync("customerId", res.id);
            }
          } else {
            this.toastError(res.msg);
          }
          console.log("个人信息", res);
        })
        .catch(err => {
          this.toastError("网络繁忙！");
          console.log("err", err);
        });
    },
    radioChange(e) {
      this.formData.type = e.target.value;
    },
    bindRegionChange: function(e) {
      this.region = e.target.value;
      this.codeList = e.target.code;
      this.realAddress = this.region.join(",");
    }
  },
  watch: {
    region() {
      let fD = this.formData;
      let codeList = this.codeList;
      if (this.region && codeList.length > 0) {
        this.formData.province = codeList[0];
        this.formData.city = codeList[1];
        this.formData.area = codeList[2];
      }
    },
    formData() {
      if (this.formData.provinceName) {
        this.realAddress =
          this.formData.provinceName +
          "," +
          this.formData.cityName +
          "," +
          this.formData.areaName;
        this.region = this.realAddress.split(",");
      }
    }
  }
};
</script>

<style scoped>
.card {
  padding: 10px;
}

.user_info {
  width: 100%;
  font-size: 14px;
  height: 100%;
  padding-bottom: 50px;
}

.input_item {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ccc;
  padding: 5px 15px;
}

.input_item input,
.input_item textarea
 {
  flex: 3;
  padding: 5px 0 5px 10px;
}
.input_item picker{
  flex: 3;
}
.input_item textarea {
  height: 50px;
  border: 1px solid red;
}
.radio-group {
  flex: 3;
  padding: 5px 0 5px 10px;
  margin-left: 10px;
}

.input_item > label {
  width: 100px;
  position: relative;
}
.btn_box button {
  background-color: #2d8cf0;
  text-align: center;
  color: #fff;
  position: fixed;
  bottom: 0;
  width: 100%;
}
</style>
